<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <div>
        <span>
            <strong class="demo">123</strong>
        </span>
    </div> -->
    <!-- <div>
       minutes: <input />
       seconds: <input />
    </div> -->

    <!-- <div class="start" style="width: 100px;height: 100px;background-color: orange;border-radius: 50%;opacity: 0.5;font-size: 30px;color: #fff;text-align: center;line-height: 100px;position: fixed;bottom: 200px;right: 100px;z-index: 100;">start</div> 
    <div class="stop" style="width: 100px;height: 100px;background-color: green;border-radius: 50%;opacity: 0.5;font-size: 30px;color: #fff;text-align: center;line-height: 100px;position: fixed;bottom: 50px;right: 100px;z-index: 100;">stop</div> -->
   <!-- <ul>
    <li>b</li>
    <li>b</li>
    <li>b</li>
    <li>b</li>
    <li>b</li>
   </ul> -->
   <!-- <div style="width: 100px;height: 100px;background-color: red;position: absolute;left: 0;top: 0;"></div> -->
   <script>
        // var strong = document.querySelector('div > span strong.demo');
        // var strong1 = document.querySelectorAll('div > span strong.demo');
        // function retSiblingElem (e, n) {
        //     while(e && n){
        //         if(n > 0){
        //             if(e.nextElementSibling){
        //                 e = e.nextElementSibling;
        //             }else{
        //                 for(e = e.nextSibling; e && e.nodeType != 1; e = e.nextSibling);
        //             }
        //             n --;
        //         }else{
        //             if(e.previousElementSibling){
        //                 e = e.previousElementSibling;
        //             }else{
        //                 for(e = e.previousSibling; e && e.nodeType != 1; e = e.previousSibling);
        //             }
        //             n ++;
        //         }
        //     }
        //     return e;
        // }
        // var div = document.getElementsByTagName('div')[0];
        // var strong = div.getElementsByTagName('strong')[0];

        // 页面计时器
        // var secondNode = document.getElementsByTagName('input')[1];
        // var minuteNode = document.getElementsByTagName('input')[0];
        // var seconds = 0,
        //     minutes = 0;
        // var timer = setInterval(function () {
        //     seconds ++;
        //     if(seconds == 60){
        //         seconds = 0;
        //         minutes ++;
        //     }
        //     secondNode.value = seconds;
        //     minuteNode.value = minutes;
        //     if(minutes == 3){
        //         clearInterval(timer);
        //     }
        // }, 10);

        // 快速阅读
        // var start = document.getElementsByClassName('start')[0];
        // var stop = document.getElementsByClassName('stop')[0];
        // var timer = 0;
        // var key = true;
        // start.onclick = function () {
        //     if(key){
        //         timer = setInterval(()=>{
        //             window.scrollBy(0,10);
        //         }, 100);
        //         key = false;
        //     } 
        // }
        // stop.onclick = function () {
        //     clearInterval(timer);
        //     key = true;
        // }
    
        // 使用 addEventListener 输出li顺序
        // var li = document.getElementsByTagName('li');
        // for(var i = 0; i < li.length; i++){
        //     // 绑定事件如果出现在for循环里，并且使用到循环里的变量，会形成闭包，使用立即执行函数解决该问题
        //     (function(i){
        //         li[i].addEventListener('click', function(){
        //             console.log(i);
        //         }, false);
        //     })(i);
        // }

        // 拖拽
        // var div  = document.getElementsByTagName('div')[0];
        // var disX, disY;
        // div.onmousedown = function (e) {
        //     disX = e.pageX - parseInt(div.style.left);
        //     disY = e.pageY - parseInt(div.style.top);
        //     document.onmousemove = function (e) {
        //         var event = e || window.event;
        //         div.style.left = e.pageX - disX + 'px';
        //         div.style.top = e.pageY - disY + 'px';
        //     }
        //     document.onmouseup = function (){
        //         document.onmousemove = null;
        //     }
        // }
    </script>
</body>
</html>